<script setup lang='ts'>
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
import { useLocaleStore } from '@/store/locale'


const size = ref<ComponentSize>('default')
const currentPage = ref(1)
const pageSize = ref(100)

const localeStore = useLocaleStore()

const language = ref(localeStore.currentLocale)

const changeLocale = (value: string) => {
  localeStore.changeLocale(value)
}

</script>


<template>
  <h2 class="title">国际化</h2>

  <el-switch v-model="language" active-value="en" inactive-value="zh" active-text="英文" inactive-text="中文" @change="changeLocale"/>

  <div class="content">
    <header>element组件国际化</header>
    <div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      />
    </div>
  </div>
  <div class="content">
    <header>基础i18n国际化</header>
    <p>{{ $t('username') }}</p>
    <p>{{ $t('email') }}</p>
    <p>{{ $t('mobile') }}</p>
    <p>{{ $t('episode',{ num: 2}) }}</p>
  </div>
  <div class="content">
    <header>复杂i18n国际化</header>
    <div>
      从后端获取语言包，获取json文件，然后动态加载
      缓存到本地<br>
      待研究。。。。。。。。。
    </div>
  </div>
  <el-button @click="$router.back()">返回</el-button>
</template>


<style scoped lang="scss">
  .title{
    margin-bottom: 30px;
  }
  .content {
    margin-bottom: 30px;
    header {
      margin-bottom: 10px;
      color: #09ad11;
      font-weight: bold;
    }
  }
</style>